<template>
  <div class="affair-view">

    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="项目会议" name="1">

        <el-table
          @row-click="tableRowClick"
          size="medium"
          :data="tableData"
          border
          style="width: 100%">
          <!--          <el-table-column-->
          <!--            align="center"-->
          <!--            prop="meet_no"-->
          <!--            label="会议编号"-->
          <!--            width="100">-->
          <!--          </el-table-column>-->
          <el-table-column
            align="center"
            prop="Name"
            label="会议名称">
          </el-table-column>
          <el-table-column
            align="center"
            label="会议类型">
            <template slot-scope="scope">
              <span v-if="scope.row.Type==='Resolution'">决议会议</span>
              <span v-else-if="scope.row.Type==='Ordinary'">普通会议</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="会议事务">
            <template slot-scope="scope">
              <span v-if="scope.row.ResolutionBusiness == 'ProjectResolution'">立项决议</span>
              <span v-else-if="scope.row.ResolutionBusiness == 'SchemeReview'">方案评审</span>
              <span v-else-if="scope.row.ResolutionBusiness == 'PlanReview'">计划评审</span>
              <span v-else-if="scope.row.ResolutionBusiness == 'TaskAcceptance'">任务验收</span>
              <span v-else-if="scope.row.ResolutionBusiness == 'ProjectAcceptance'">项目验收</span>
              <span v-else-if="scope.row.ResolutionBusiness == 'PeriodicReview'">阶段性评审</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="会议时间">
            <template slot-scope="scope">
              {{ dateFormat1('yyyy-mm-dd HH:MM:SS', scope.row.StartTime) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Creator.Name"
            label="发起人">
          </el-table-column>
          <el-table-column
            align="center"
            label="关联任务"
            prop="TaskName">
          </el-table-column>
          <el-table-column
            align="center"
            :formatter="formatterState"
            label="会议状态">
          </el-table-column>
        </el-table>

      </el-tab-pane>

      <el-tab-pane label="变更记录" name="2">

        <el-form
          ref="queryForm"
          :model="screenData"
          :inline="true"
          label-width="68px"
        >

          <el-form-item label="变更类型">
            <el-select
              v-model="screenData.change_type"
              placeholder="请选择类型"
              size="small"
              @change="typeChange"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="发起时间">
            <el-date-picker
              v-model="value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange"
            />
          </el-form-item>

          <el-form-item>

            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            <el-button plain icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table
          size="medium"
          :data="tableData"
          @row-click="changeTableRowClick"
          border
          style="width: 100%">
          <el-table-column
            align="center"
            prop="SerialNumber"
            label="变更编号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="change_type"
            label="变更类型">
            <template slot-scope="scope">
              <span v-if="scope.row.code == 'QualitySource'">质量标准审批</span>
              <span v-else-if="scope.row.code == 'StabilityScheme'">稳定性方案审批</span>
              <span v-else-if="scope.row.code == 'ExchangeStability'">更换稳定性箱审批</span>
              <span v-else-if="scope.row.code == 'BuildProject'">立项审批</span>
              <span v-else-if="scope.row.code == 'Resolutions'">立项决议审批</span>
              <span v-else-if="scope.row.code == 'CheckResult'">检验结果审批</span>
              <span v-else-if="scope.row.code == 'RepealCheck'">撤销检验审批</span>
              <span v-else-if="scope.row.code == 'ApprovalCheck'">请验审批</span>
              <span v-else-if="scope.row.code == 'RetainDestroy'">留样销毁审批</span>
              <span v-else-if="scope.row.code == 'ProblemAcceptance'">问题验收</span>
              <span v-else-if="scope.row.code == 'ChangeProjectInfo'">项目信息变更</span>
              <span v-else-if="scope.row.code == 'ChangeProjectMember'">项目成员变更</span>
              <span v-else-if="scope.row.code == 'ChangeProjectTask'">项目任务变更</span>
              <span v-else-if="scope.row.code == 'ProjectPause'">项目暂停</span>
              <span v-else-if="scope.row.code == 'ProjectStop'">项目终止</span>
              <span v-else-if="scope.row.code == 'ProjectFirstCheck'">项目方案书</span>
              <span v-else-if="scope.row.code == 'ProjectPlanCheck'">项目计划审批</span>
              <span v-else-if="scope.row.code == 'ProjectEndCheck'">项目结题验收</span>
              <span v-else-if="scope.row.code == 'TaskCheck'">任务验收</span>
              <span v-else-if="scope.row.code == 'ChangeProjectMulTask'">任务批量变更</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="reason"
            label="变更原因">
            <template slot-scope="scope">
              <span>{{scope.row.reason ? scope.row.reason : scope.row.description}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="发起时间">
            <template slot-scope="scope">
              <span>{{scope.row.created_at?dateFormat1('yyyy-mm-dd',scope.row.created_at):''}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="creator_name"
            label="发起人">
            <template slot-scope="scope">
              <span>{{scope.row.creator_name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">未审批</span>
              <span v-else-if="scope.row.status == 1">通过</span>
              <span v-else-if="scope.row.status == 2">拒绝</span>
              <span v-else-if="scope.row.status == 3">撤销</span>
            </template>
          </el-table-column>

        </el-table>

      </el-tab-pane>

      <el-tab-pane label="项目报告" name="3">

        <report-view ref="reportView" :datas="datas"></report-view>

      </el-tab-pane>

      <el-tab-pane label="阶段性评审" name="4">

        <el-table
          @row-click="reviewRowClick"
          size="medium"
          :data="taskList"
          border
          style="width: 100%">
          <el-table-column
            align="center"
            prop="task_name"
            label="评审节点">
            <template slot-scope="scope">
              <span v-if="scope.row.task">{{scope.row.task.task_name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="report_period"
            label="状态"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">未开始</span>
              <span v-if="scope.row.status == 2">待评审</span>
              <span v-if="scope.row.status == 3">已评审</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="conclusion"
            label="评审结论"
            width="200">
          </el-table-column>
          <el-table-column
            align="center"
            prop="meeting_time"
            label="评审时间"
            width="200">
            <template slot-scope="scope">
              <span>{{scope.row.conclusion_time ? dateFormat1('yyyy-mm-dd',scope.row.conclusion_time) : ''}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 2 && checkPerson(scope.row)"
                size="medium"
                type="text"
                @click="meetingClick(scope.row)">
                发起会议
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
    import reportView from "./modules/reportView";
    export default {
        name: "index",
        components:{reportView},
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{}
                }
            }
        },
        data:function () {
            return{
                activeName:'1',
                pageSize:10,
                pageNum:1,
                tableData:[],
                taskList:[],
                screenData:{
                    change_type:0,
                    start_time:'',
                    end_time:'',
                },
                value:[],
                typeOptions: [
                    {
                        value: 0,
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '项目变更'
                    },
                    {
                        value: 2,
                        label: '成员变更'
                    },
                    {
                        value: 3,
                        label: '任务变更'
                    },
                    {
                        value: 4,
                        label: '任务批量变更'
                    }
                ],
            }
        },
        mounted:function() {
            this.getMeetingList();
            //this.getDataList();
        },
        methods:{
            getData:function(){

            },
            tableRowClick:function(row, column, event){
                this.$comFun.goMeetingView(row.Id)
            },
            reviewRowClick:function(row, column, event){
                if (row.meeting_id && column.label != '操作'){
                    this.$comFun.goMeetingView(row.meeting_id)
                }
            },
            formatterState(row, column) {

                if(row.State== 'ToDo'){
                    return '未开始'
                }
                if(row.State=='Doing'){
                    return '进行中'
                }
                if(row.State== 'Done'){
                    return '已结束'
                }
                if(row.State=='Cancel'){
                    return '已取消'
                }
            },
            meetingClick:function(row){
                this.$comFun.goMeetingCreate(6,{name:this.datas.project_name,id:this.datas.id},{name:row.task.task_name,id:row.task.id})
            },
            checkPerson:function(row){
                if (this.datas.project_person_in_charge_id == this.$store.getters.userInfo.user.id){
                    return true
                }
                if (row.task && row.task.person_in_charge){
                    if (row.task.person_in_charge.member_id == this.$store.getters.userInfo.user.id){
                        return true
                    }
                }
                return false
            },
            changeTableRowClick:function(row, column, event){
                this.$router.push({name:'projectAuditDetail',query:{id:row.flow_id}});
            },
            getMeetingList:function(){
                let data = {
                    meeting_type:"project",
                    relation_id:this.datas.id
                }
                this.$api.PROJECT_START_PROJECT_MEETING_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;
                    }
                })
            },
            getReportData:function(){
                let data = {
                    project_id:this.datas.id,
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_START_WORK_REPORT_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;

                        this.total = res.data.total;
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            getDataList:function(){

                let data = {
                    project_id:this.datas.id,
                    transaction_type:Number(this.activeName),
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }

                this.$api.PROJECT_WORK_TRANSACTION_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;

                        this.total = res.data.total;
                    }
                }).catch(err=>{

                })
            },
            getTaskList:function(){
                this.$api.PROJECT_WORK_REVIEW_LIST(this.datas.id).then(res=>{
                    if (res.code == 200){
                        this.taskList = res.data.data;
                    }
                }).catch(err=>{

                })
            },
            getChangeList:function(){
                let data = {
                    project_id:this.datas.id,
                    start_time:this.screenData.start_time,
                    end_time:this.screenData.end_time,
                    change_type:this.screenData.change_type,
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_WORK_CHANGE_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;

                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            handleClick:function () {
                this.pageNum = 1;
                if (this.activeName == 1){
                    this.getMeetingList()
                }else if (this.activeName == 4){
                    this.getTaskList()
                }else if (this.activeName == 3){
                    //this.getReportData()
                    if (this.$refs.reportView){
                        this.$refs.reportView.getData();
                    }
                }else {
                    //this.getDataList();
                    this.getChangeList();
                }

            },
            dateChange:function () {
                this.pageNum = 1
                if (this.value.length) {
                    this.screenData.start_time = this.dealDateStr(this.value[0]) + ' 00:00:00'
                    if (this.value.length > 1) {
                        this.screenData.end_time = this.dealDateStr(this.value[1]) + ' 23:59:59'
                    }
                } else {
                    this.screenData.start_time = ''
                    this.screenData.end_time = ''
                }
                this.getChangeList();
            },
            typeChange:function () {
                this.pageNum = 1
                this.getChangeList();
            },
            handleQuery:function () {
                this.pageNum = 1
                this.getChangeList();
            },
            resetQuery:function () {
                this.pageNum = 1
                this.screenData.start_time = '';
                this.screenData.end_time = '';
                this.screenData.change_type = 0;
                this.value = []
                this.getChangeList();
            },
            dealDateStr: function(date) {
                const year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                if (month < 10) {
                    month = '0' + month
                }
                if (day < 10) {
                    day = '0' + day
                }

                return year + '-' + month + '-' + day
            }
        }
    }
</script>

<style scoped>

</style>
